{extend name="public/world"}
{block name="style"}
<style type="text/css">
    .layui-btn-xs {
        height: 18px;
        line-height: 18px;
        padding: 0 5px;
        font-size: 12px;
    }
    .layui-btn-sm {
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        font-size: 12px;
    }
    .layui-btn+.layui-btn {
        margin-left: 0px;
    }
    .layui-table[lay-size=sm] td, .layui-table[lay-size=sm] th {
        font-size: 12px;
        padding: 5px;
    }
    .layui-card-body .layui-table {
        margin: 0;
    }
    .layui-table-cell {
        padding: 0;
    }
    .cok {color: #009688;}
    .row-in {background-color: #2b2b2b !important;color: #fff9ec}
</style>
{/block}
{block name="container"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md5" style="padding-right: 10px;">
                    <table class="layui-table" lay-size="sm">
                        <colgroup>
                            <col width="150">
                            <col width="75">
                            <col width="70">
                            <col width="70">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>摘要</th>
                            <th>科目</th>
                            <th style="text-align:right">借方</th>
                            <th style="text-align:right">贷方</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="item" id="val"}
                        <tr class="period" data-code="{$val['period_code']}">
                            <td>{$val['description']}</td>
                            <td>{$val['code']}</td>
                            <td style="text-align:right">{$val['debit']}</td>
                            <td style="text-align:right">{$val['credit']}</td>
                            <td>{$val['market']}</td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                <div class="layui-col-md7">
                    <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
                </div>
            </div>

        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use(['form','table','tableMerge'], function() {
        var $ = layui.jquery
            , table = layui.table
            , form = layui.form
            , tableMerge = layui.tableMerge;
        //渲染
        $('.period').click(function(){
            if($(this).hasClass('row-in')) {
            } else {
                $(this).addClass('row-in').siblings('tr').removeClass('row-in');
                var period_code = $(this).attr('data-code');
                if(period_code) {
                    table.render({
                        elem: '#dataTable'
                        ,url: "{:url('/erp.Finance/show')}" //数据接口
                        ,where: {period_code:period_code}
                        ,page: false //开启分页
                        //,skin: 'line'
                        ,even: false
                        ,size: 'sm'
                        ,limit: 20
                        ,text: {
                            none : '暂无凭证'
                        }
                        ,toolbar: false
                        ,defaultToolbar: false
                        ,cols: [[ //表头
                            {field: 'period_code',merge: true, width: 70, title: '凭证编号'}
                            ,{field: 'code_name', title: '科目名称'}
                            ,{field: 'debit', align:'right', width: 70, title: '借方金额'}
                            ,{field: 'credit', align:'right', width: 70, title: '贷方金额'}
                            ,{field: 'period_at',merge: ['period_code', 'period_at'], width: 70, title: '凭证日期'}
                            ,{field: 'order_no',merge: ['period_code', 'order_no'], width: 130, title: '原始单号'}
                        ]]
                        ,done: function() {
                            tableMerge.render(this);
                        }
                    });
                }
            }
        });
        table.on('row(dataTable)', function(obj){
            if($(obj.tr).hasClass('row-in')) {
                //$(obj.tr).removeClass('row-in');
            } else {
                $(obj.tr).addClass('row-in').siblings('tr').removeClass('row-in');
            }
        });
    });
</script>
{/block}